<template>
  <div class="anhuiMap">
    <Echart
      :options="options"
      id="centerMap"
      ref="centerMap"
      width="100%"
      :style="{ height: heightSet }"
    ></Echart>
    <!-- <mapDialog></mapDialog> -->
  </div>
</template>
    
<script>
import anhui from "@/mapdata/anhui/anhui.json";
import Echart from "@/common/echart";
import axios from "axios";
// import mapDialog from "./mapDialog.vue"
export default {
  props: {
    idName: {
      type: String,
      default: "centerMap",
    },
    // heightMap: {
    //   type: String,
    //   default: "450px",
    // },
    zoom: {
      type: Number,
      default: 1.1,
    },
    mapTop: {
      type: String,
      default: "middle",
    },
    heightSet: {
      default: "510px",
    },
    formatterCustom: {
      type: Function,
    },
    data: {
      type: Array,
      default: function () {
        return [];
      },
    },
    layoutCenter: {
      type: Array,
      default: function () {
        return ["50%", "47%"];
      },
    },
  },
  data() {
    let imgUrl = require("../../assets/qjzl/dialogbg.png");
    let that = this;

    // console.log(that.data);
    return {
      //   dataList: [
      //     { ename: anhui, name: "安徽" }
      //   ],
      options: {
        tooltip: {
          show: true,
          backgroundColor: "rgba(0,0,0,0)",
          borderWidth: "0",
          formatter: function (params) {
            var res = `<div style="min-width:280px;background:url(${imgUrl}) no-repeat;background-size:100% 100%;padding:20px 30px;">
                  <div style="width:100%;margin:0 auto;padding:0 auto;text-align:center;font-size:16px;font-weight:bold;color:#fff;">
                    ${params.name}
                  </div>
                    ${that.formatterCustom(params.data)}
                </div>`;

            return res;
          },
        },
        // visualMap: {
        //   left: 'right',
        //   min: 0,
        //   max: 50000,
        //   show: false,
        //   inRange: {
        //     color: [
        //     '#313695',
        //   '#4575b4',
        //   '#74add1',
          
        //   '#fdae61',
        //   '#f46d43',
        //   '#d73027',
        //   '#a50026'
        //     ]
        //   },
        //   text: ['High', 'Low'],
        //   calculable: true
        // },
        // 地图的阴影底图
        geo: {
          map: "anhui",
          zoom: this.zoom,
          top: this.mapTop,
          roam: false,
          layoutCenter: this.layoutCenter, //位置
          layoutSize: "80%", //大小
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              borderWidth: 6, //设置外层边框
              borderColor: "rgba(66, 199, 222,1)",
              shadowColor: "rgb(59, 11, 62)",
              shadowOffsetX: 10,
              shadowOffsetY: 11,
            },
          },
        },
        series: [
          {
            type: "map",
            map: "anhui",
            top: "50px",
            // aspectScale: 0.9,
            // layoutCenter: ["50%", "50%"], //地图位置
            // layoutSize: "100%",
            layoutCenter: this.layoutCenter, //位置
            layoutSize: "80%", //大小
            zoom: this.zoom,
            label: {
              normal: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "12",
                color: "#FEFEFE",
              },
              emphasis: {
                show: true,
                fontFamily: "SourceHanSansCN",
                fontSize: "12",
                color: "#FEFEFE",
              },
            },
            itemStyle: {
              areaColor: "rgba(5, 107, 158, 1)",
              color: "#2B5890", //地图颜色
              // borderWidth: 2, //分界线wdith
              // borderColor: "#000", //分界线颜色
              borderColor: "rgba(9, 13, 63,1)",
              borderWidth: 1,
              emphasis: {
                show: true,
                areaColor: "#ff7200", //鼠标滑过区域颜色
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            // zlevel: 1,
            data: that.data,
          },
        ],
      },
    };
  },
  components: {
    Echart,
    // mapDialog
  },
  created() {
    this.$echarts.registerMap("anhui", anhui);
  },
  methods: {
    
  },
  mounted() {
    tools.loopShowTooltip(this.$refs.centerMap.chart, this.options, {
      loopSeries: true,
    }); 
    //自动轮播主要看这段话
  },
};
</script>
    
<style lang="scss" scoped>
</style>
    